<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>挂单列表</title>
    <link rel="stylesheet" href="__STATIC__/cash/css/account.css">
    <script src="__STATIC__/cash/js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="__STATIC__/plugs/layui/css/layui.css?ver={:date('ymd')}" />
    <script src="__STATIC__/plugs/layui/layui.all.js" charset="utf-8"></script>
</head>

<body>
    <header>
        <div>
            <img src="__STATIC__/cash/img/logo.png" alt="">
            <div>挂单列表</div>
        </div>
        <div>
            <a href="{:url('Index/index')}">
                返回
            </a>
        </div>
    </header>
    <form id="form1" action="{:url('Guadan/get_order_list')}" method="post">
    <div class="headline">
            <div>
                <div>订单</div>
                <input type="text" name="key" placeholder="请输入订单号" value="{$key}">
                <a href="javascript:;" onclick="tijiao()">查询</a>
            </div>
        <div>
            <div>编号</div>
            <div>订单金额</div>
            <div>时间</div>
            <div>操作</div>
        </div>
    </div>
    </form>
        <div class="content">
            {if condition="!empty($order)"}
                {foreach name="order" item="v"}
                <div class="list">
                    <a href="javascript:;" onclick="del_order({$v.id})">
                        <img src="__STATIC__/cash/img/X.png" alt="">
                    </a>
                    <div>
                        <div>{$v.order_sn}</div>
                        <div>{$v.final_amount}</div>
                        <div>{$v.addtime|date="Y-m-d H:i",###}</div>
                    </div>
                    <div onclick="pupopclick({$v.id});">结账</div>
                </div>
                {/foreach}
            {/if}
        </div>

    <div class="pupop"></div>
    <div class="pupop-content">
        <div class="pupop-headline">
            订单详情
        </div>
        <div>
            <div>商品</div>
            <div>规格</div>
            <div>单价</div>
            <div>数量</div>
            <div>折扣</div>
        </div>
        <div id="pupop-roll">
            <!-- 循环开始 -->

            <!-- 循环结束 -->
        </div>

        <div class="statistical">
            <div>
                <span>总计</span>
                <span id="total_amount">120.5</span>
            </div>
            <div>
                <span>实收</span>
                <span id="pay_amount">120.5</span>
            </div>
            <label for="">
                <span>现金</span>
                <!--<input type="text" name="xianjin" value="0" onkeyup="value=value.replace(/^([1-9]\d*|0)(\.\d{1,2})?$/,'')">-->
                 <input type="text" name="xianjin" placeholder="0" onkeyup="count_zhaoling()">
            </label>
            <div>
                <span>找零</span>
                <span id="zhaoling">120.5</span>
            </div>
        </div>


        <div class="xuanze">
            <div>
                <div class="pay-popup">0</div>
                <div class="pay-popup">0</div>
                <div class="pay-popup">0</div>
                <div class="pay-popup">0</div>
            </div>
            <div>
                <div>收款</div>
                <label for="yue">
                    <span>余额</span>
                    <input type="text" name="yue" id="yue" value="0">
                </label>
                <div class="pay" data-id="2">微信</div>
                <div class="pay" data-id="1">支付宝</div>
                <div class="pay" data-id="4">现金</div>
                <div class="pay" data-id="5">银行卡</div>
            </div>
        </div>
        <div class="saoyisao">
            <div>
                扫码
            </div>
            <input type="text" name="qrcode" placeholder="扫描支付码    微信/支付宝">
        </div>
        <a class="jiezhang" href="javascript:;" onclick="jiezheng();">结账</a>
        <div class="guanbi pupop-esc">关闭</div>
        <div id="final_amount">0</div>
        <div id="order_id">0</div>
        <div id="user_money">0</div>

        <!--打印区域 start-->
        <div style="display: none">
            <div id="print-area">
                <table id="print">
                </table>
            </div>
        </div>
        <!--打印区域 end-->

    </div>
    <script>
        function pupopclick(id) {
            $.post("{:url('Guadan/get_order_details')}",
                {order_id:id},
                function(data){
                    if(data.code == 1){
                        var html = '';
                        for(var i=0;i<data.data['list'].length;i++){
//                            console.log(data.data[i].spec_detail);
                            if(data.data['list'][i]['spec_detail'] == null){
//                                console.log(data.data[i]["spec_detail"]);
                                var title = '无';
                            }else{
                                var title = data.data['list'][i]['spec_detail'];
                            }
                            if(data.data['list'][i]['discount_num'] == null){
                                var discount = '无';
                            }else{
                                var discount = data.data['list'][i]['discount_num'];
                            }

                            html += '<div><div><p>'+data.data['list'][i]["name"]+'</p></div><div>'+title+'</div><div>'+data.data['list'][i]["spec_price"]+'</div><div>'+data.data['list'][i]["goods_num"]+'</div><div>'+discount+'</div></div>';
                        }

                        $('#pupop-roll').empty();
                        $('#pupop-roll').html(html);

                        if(data.data['member'].length !=0){
                            $('input[name=yue]').val(data.data['member']['user_money']);
                            $('#user_money').text(data.data['member']['user_money']);
                        }else{
                            $('input[name=yue]').parent().css('display','none');
                        }

                        $('#final_amount').text(data.data['final_amount']);
                        $('#order_id').text(data.data['order_id']);
                        $('#total_amount').text(data.data['total_amount']);
                        $('#pay_amount').text(data.data['final_amount']);

                        $('.pupop').css('display','block');
                        $('.pupop-content').css('display', 'block');
                    }else{
                        layer.msg(data.msg, {
                            icon: 2,
                            time: 1000
                        });
                        return false; //重要
                    }
                }
            );

        };
        $(function () {
            // 订单信息弹出层
            $('.pupop-click').click(function () {});
            $('.pupop-esc').click(function () {
                $('.pupop').css('display', 'none');
                $('.pupop-content').css('display', 'none');

            });
            $('.pupop').click(function () {
                $('.pupop').css('display', 'none');
                $('.pupop-content').css('display', 'none');
            });
            // 底部付款方式单选
            $('.pay').click(function () {
                var yue = parseFloat($('input[name=yue]').val()).toFixed(2);
                var final_amount = parseFloat($('#final_amount').text()).toFixed(2);
                var money = parseFloat(parseFloat(final_amount)-parseFloat(yue)).toFixed(2);
                if(money <0){
                    money = 0;
                }

                $('.pay').removeClass('pay-zhong');
                $(this).addClass('pay-zhong');
                let number = $(this).index() - 2;
                $('.pay-popup').css('visibility', 'hidden');
                $('.pay-popup').eq(number).text(money);
                $('.pay-popup').eq(number).css('visibility', 'visible');
            });
        });
    </script>
    <script>

        function jiezheng(){
            var order_id = $('#order_id').text();
            var pay_type = 0;
            var user_money = parseFloat($('#user_money').text()).toFixed(2);           //会员余额
            var yue = parseFloat($('input[name=yue]').val()).toFixed(2);
            var qrcode = $('input[name=qrcode]').val();
            var order_id = $('#order_id').text();           //订单id
            console.log(yue);
            console.log(user_money);
            if(parseFloat(yue) > parseFloat(user_money)){
                layer.msg('输入金额不能超过会员目前可用余额', {
                    icon: 2,
                    time: 1500
                });
                return false; //重要
            }

            $('.pay').each(function () {
                if($(this).hasClass('pay-zhong')){
                    pay_type = $(this).attr('data-id');
                    return false
                }
            })

            $.post("{:url('Guadan/pay')}",
                {yue:yue,qrcode:qrcode,pay_type:pay_type,order_id:order_id},
                function(data){
                    if(data.code == 1){
                        $('#print').html(data.data);
                        layer.msg('付款成功', {
                            icon: 1,
                            time: 1000
                        }, function (data) {
                            print();
                            location.reload();
                        });
                    }else{
                        layer.msg(data.msg, {
                            icon: 2,
                            time: 1500
                        });
                        return false; //重要
                    }
                }
            );
        }

        /**
         * 打印小票
         */
        function print(){
            if (!!window.ActiveXObject || "ActiveXObject" in window) {
                remove_ie_header_and_footer();
            }
            var newWindow = window.open("打印窗口", "_blank");
            var docStr = $("#print-area").html();
            newWindow.document.write(docStr);
            newWindow.document.close();
            newWindow.print();
            newWindow.close();
        }
        /**
         * 取出打印的页眉页脚
         */
        function remove_ie_header_and_footer(){
            var hkey_root, hkey_path, hkey_key;
            hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
            try {
                var RegWsh = new ActiveXObject("WScript.Shell");
                RegWsh.RegWrite(hkey_path + "header", "");
                RegWsh.RegWrite(hkey_path + "footer", "");
            } catch (e) {}
        }


        function tijiao(){
            $('#form1').submit();
        }

        /**
         * 计算找零金额
         */
        function count_zhaoling(){
            var cash = parseFloat($('input[name=xianjin]').val()).toFixed(2);
            var final_amount = parseFloat($('#pay_amount').text()).toFixed(2);
            var zhaoling = parseFloat(parseFloat(cash)-parseFloat(final_amount)).toFixed(2);
            $('#zhaoling').text(zhaoling);
        }

        /**
         * 删除挂单
         */
        function del_order(id){
            layer.confirm('确定删除该订单吗？', {
                btn: ['确定', '取消']
            }, function () {
                $.post("{:url('Order/del_order')}", {
                        id:id
                    },
                    function(data){
                        if(data.code== 1){
                            layer.msg('删除成功', {
                                icon: 1,
                                time: 1000
                            }, function (data) {
                                location.reload();
                            });
                        }else{
                            layer.msg(data.msg, {
                                icon: 2,
                                time: 1500
                            });
                        }
                    }
                );
            }, function () {});
        }

    </script>
</body>

</html>